<template>
    <el-dialog 
    v-model="store.state.homeview.dialogFormVisible" 
    title="请输入修改内容"
    @open="ruleForm.username=store.state.homeview.rowData"
    >
        <el-form 
        :data="ruleForm"
        ref="ruleFormRef" 
        :model="ruleForm" status-icon 
        :rules="rules" 
        label-width="120px" 
        class="demo-ruleForm">
            <!-- 用户/coser专用表 -->
            <el-form-item label="账户名" prop="username" v-show="Ushowtag || Sshowtag || Nshowtag">
                <el-input 
                v-model="ruleForm.username" 
                type="string" autocomplete="off"
                :disabled="Nshowtag ? true : false" 
                />
            </el-form-item>
            <!-- 商家专用表 -->
            <el-form-item label="商家介绍" prop="description" v-show="Sshowtag">
                <el-input v-model="ruleForm.description" type="string" autocomplete="off" />
            </el-form-item>
            <el-form-item label="商家主题" prop="topic" v-show="Sshowtag">
                <el-input v-model="ruleForm.topic" type="string" autocomplete="off" />
            </el-form-item>
            <el-form-item label="商家定价" prop="price" v-show="Sshowtag">
                <el-input v-model="ruleForm.price" type="string" autocomplete="off" />
            </el-form-item>
            <el-form-item label="商家照片" prop="picUrl" v-show="Sshowtag">
                <el-input v-model="ruleForm.picUrl" type="string" autocomplete="off" />
            </el-form-item>
            <!-- 内部人员专用表 -->
            <el-form-item label="修改场地" prop="place" v-show="Nshowtag">
                <el-input v-model="ruleForm.place" type="string" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef, $route.path)">提交</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { useStore } from "vuex"
import { onMounted, reactive, ref, watch } from 'vue'
import { emitChangeFn, FormInstance, FormRules } from 'element-plus'
import { useRoute } from "vue-router";
import link from "@/util/api";
const route = useRoute()
const store = useStore()
const ruleFormRef = ref<FormInstance>()
const Ushowtag = route.path === '/home/peopleManage/userManage'
const Nshowtag = route.path === '/home/peopleManage/officialsManage'
const Sshowtag = route.path === '/home/peopleManage/merchantsManage'
const emit = defineEmits(['changeData'])

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === "") {
        callback(new Error("内容不能为空"));
    } else {
        callback();
    }
}

//制订表格规则
const ruleForm = reactive({
    username: '',
    description: '',
    topic: '',
    place: '',
    price:'',
    picUrl:[]
})

//制订验证规则
const rules = reactive<FormRules>({
    userName: [{ validator: validatePass, trigger: 'blur' }],
})
let newarr = ref([])
//提交表单
const submitForm = (formEl: FormInstance | undefined, path: string) => {
    //到时候发送网络请求进行更改
    if (Nshowtag) {
        link(`/changeWorkers`, "post", '', { ruleForm }
        ).then(ok => {
            console.log(ok)
        })        
    }
    if(Sshowtag){
        link(`/changeShop`, "post", '', { ruleForm }
        ).then(async(ok) => {
            console.log(ok)
            await console.log('数据改变了');
            await link('/getUsers').then( (res: any) => {
                    newarr = res.data.filter((item:any)=>{
                        return item.categary =="商家"
                    })
                    console.log('这里重新发起一次请求',res);     
                    console.log('过滤之后的数据为：',newarr);
                    emit('changeData',newarr)
                     
            })
            
        })
    }
    store.commit('SET_DIALOG')
}
//重置表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields()
}
</script>